/*
 * @Author: 
 * @Date: 2022-02-08 14:35:01
 * @LastEditors: lqj
 * @LastEditTime: 2022-02-14 15:48:10
 * @Description: 三级路由
 */
import React, { useState } from 'react';
import { nanoid } from 'nanoid';
import MsgDetail from './components/detail';
import { Link, Route, Switch } from 'react-router-dom'
export default function MsgInfo() {
  const [msgList] = useState([
    {
      id: nanoid(),
      title: 'msg01',
      url: '/message/01',
      type: 'params'
    },
    {
      id: nanoid(),
      title: 'msg02',
      url: '/message/02',
      type: 'query'
    },
    {
      id: nanoid(),
      title: 'msg03',
      url: '/message/03',
      type: 'state'
    }
  ])
  return (
    <>
      <ul>
        {
          msgList.map(it => {
            if (it.type === 'params') {
              return (<li key={it.id}>
                {/* 向路由组件传递params参数 */}
                <Link replace to={`/layout/msgInfo/msgDetail/${it.id}/${it.title}`}>{it.title}</Link>
              </li>)
            } else if (it.type === 'query') {
              return (<li key={it.id}>
                {/* 向路由组件传递search(query)参数 */}
                <Link replace to={`/layout/msgInfo/msgDetail?id=${it.id}&title=${it.title}`}>{it.title}</Link>
              </li>)
            } else {
              return (<li key={it.id}>
                {/* 向路由组件传递state(body)参数 */}
                <Link replace to={{ pathname: `/layout/msgInfo/msgDetail`, state: { ...it }, query: { label: 'label' }}}>{it.title}</Link>
              </li>)
            }
          })
        }
      </ul>
      <Switch>
        {/* 声明组件接收params参数 */}
        {/* query、state正常声名接收 */}
        <Route path={['/layout/msgInfo/msgDetail/:id/:title', '/layout/msgInfo/msgDetail']} component={MsgDetail}></Route>
      </Switch>
    </>
  );
}
